<template>
  <div class="home-page-root">
    <!--此容器只用于上下缩进-->
    <div class="home-page-container">
      <!--左侧展示区根容器-->
      <div class="left-show-page-root">
        <topology></topology>
      </div>
      <!--右侧展示区根容器-->
      <div class="right-show-page-root">
        <!--此容器只用于左右缩进-->
        <div class="right-show-page-container">
          <!--上方图外容器-->
          <div class="upstairs-container">
            <DisplayBoard :iconUrl="flowmeterData.iconUrl" :titleName="flowmeterData.titleName">
              <!--上方图内容器-->
              <div class="flow-volume-container">
                <!--瞬时流量外容器-->
                <div class="moment-flow-pot">
                  <FlowMeter end-color="#85D921" :flowmeterData="flowmeterData.instantFlowData"></FlowMeter>
                </div>
                <!--累计流量外容器-->
                <div class="total-flow-pot">
                  <FlowMeter end-color="#FF8400" :flowmeterData="flowmeterData.totalFlowData"></FlowMeter>
                </div>

              </div>
            </DisplayBoard>
          </div>
          <!--下方图外容器-->
          <div class="downstairs-container">
            <DisplayBoard :iconUrl="testEquipmentData.iconUrl" :titleName="testEquipmentData.titleName">
              <WaterQualityParameter></WaterQualityParameter>
            </DisplayBoard>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script setup name="home">
import Topology from "@/views/homePage/components/Topology.vue";
import DisplayBoard from "@/views/homePage/components/DisplayBoard.vue";
import {reactive} from 'vue';
import flowmeterImage from '@/assets//images/display_board/flowmeter_icon_image.png'
import testEquipmentImage from '@/assets//images/display_board/test_equipment_icon_image.png'
import magic_cube_image from '@/assets/images/display_board/magic_cube_image.png'
import great_ultimate_image from '@/assets/images/display_board/great_ultimate_image.png'
import FlowMeter from "@/views/homePage/components/FlowMeter.vue";
import WaterQualityParameter from "@/views/homePage/components/WaterQualityParameter.vue";


/**
 * 流量计数据
 */
let flowmeterData = reactive({
  iconUrl: flowmeterImage,
  titleName: '流量计',
  instantFlowData:{
    imgUrl:magic_cube_image,
    flowNumber:'5380',
    flowMeterNumber:'瞬时流量'
  },
  totalFlowData:{
    imgUrl:great_ultimate_image,
    flowNumber:'68000',
    flowMeterNumber:'累计流量'
  }
});

/**
 * 检测设备数据
 */
let testEquipmentData = reactive({
  iconUrl: testEquipmentImage,
  titleName: '水质多参数检测设备',
});
</script>

<style scoped lang="scss">
//主内容区根容器
.home-page-root {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  //设置内容区背景图片
  background-image: url('../../assets/images/home_page_back/home_page_back_image.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  padding: 40px;
  box-sizing: border-box;
  //用于上下缩进容器样式
  .home-page-container {
    width: 100%;
    height: 100%;
    //border: 2px #FFFFFF solid;
    display: flex;


    //左侧展示区容要容器
    .left-show-page-root {
      width: 70%;
      height: 100%;
      //background: #BBFFAA;
    }

    //右侧展示区容器
    .right-show-page-root {
      width: 30%;
      height: 100%;
      box-sizing: border-box;
      padding-left: 40px;
      //background: yellowgreen;
      display: flex;
      justify-content: center;
      //左右缩进容器样式
      .right-show-page-container {
        width: 100%;
        height: 100%;
        //background-color: pink;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        //上方图容器样式
        .upstairs-container {
          width: 100%;
          height: 48%; //不够50%是用来调整上下两个展板间距的
          //background-color: #BBFFAA;

          //上方图内容器样式
          .flow-volume-container {
            width: 100%;
            height: 100%;
            display: flex;
            //瞬时流量外容器样式
            .moment-flow-pot {
              width: 50%;
              height: 100%;
              //background-color: pink;
            }

            //累计流量外容器样式
            .total-flow-pot {
              width: 50%;
              height: 100%;
              //background-color: #BBFFAA;
            }
          }


        }

        // 下方图容器样式
        .downstairs-container {
          width: 100%;
          height: 50%;
          //background-color: #2DD2F6;
        }
      }
    }
  }


}
</style>
